<div>
<div class="container">
    <div class="title">我的班级</div>
    <div class="add" (click)="rollIndex.addRoll = true"></div>
    <div  class="my_roll clearfix">
      <div (click)="rollIndex.isEditor=!rollIndex.isEditor" class="setting" [ngClass]="{'setting1':rollIndex.isEditor}" nzTitle="设置" nzPlacement="topCenter" nz-tooltip></div>
      <ul *ngIf="!rollIndex.isLoadIng">
        <li class=" f_l " style="cursor: pointer"  *ngFor="let myroll of rollIndex.myRollArr;let i= index" [ngClass]="{'customer-item-content':!rollIndex.isEditor}">
          <div class="cover" [style.background-image]="'url('+utilServe.readImgUrl+myroll.CoverUrl+')'" (click)="goToClassIndex(myroll.PK_ClassGuid)"></div>
          <div class="roll_info" >
            <div (click)="goToClassIndex(myroll.PK_ClassGuid)">
          <div class="roll_title">{{myroll.ClassName}}</div>
          <div class="roll_num">班级号:  <span>{{myroll.IDCode}}</span></div>
            <div class="roll_code">邀请码:  <span>{{myroll.InvitationCode}}</span></div>
          <div class="create_time">创建：{{myroll.CreateTime.slice(0,10)}}</div>
          <div class="end_time">过期：{{myroll.EndTime}}</div>
            </div>
              <div class="roll_peoples">
                <div class="peoples_logo"></div>
                <div class="peoples">{{myroll.Number}}人</div>
              </div>
            <div class="editor_logo" *ngIf="rollIndex.isEditor">
              <img src="/assets/img/rollIndex/xiugai.png" alt="" width="20" height="21" style="margin-right: 10px;vertical-align: text-bottom;cursor: pointer" (click)="rollIndex.UpdateRoll(myroll)">
              <img src="/assets/img/rollIndex/shanchu.png" alt="" width="20" height="21" style="vertical-align: text-bottom;cursor: pointer" (click)="changClassStatus(myroll.PK_ClassGuid,99,i)">
            </div>
          </div>
        </li>
      </ul>
    </div>
   <div class="null" *ngIf="rollIndex.myRollArrs.length == 0 && !rollIndex.isLoadIng">
    <div class="null_cover"><img src="/assets/img/rollIndex/book.png" alt="" width="126" height="102"></div>
    <div class="null_tip">
      <p>还没有任何班级</p>
      <p>您可以<span (click)="rollIndex.addRoll = true">"点击添加"</span>班级</p>
    </div>
  </div>
    <div  class="loading_more" *ngIf="rollIndex.isShowMore" (click)="rollIndex.showMore()">查看更多...</div>
    <div class="loading" *ngIf="rollIndex.isLoadIng"><img src="/assets/img/rollIndex/loading-white.gif" alt=""></div>
</div>
<div class="end_container">
    <div class="buy-title">过期班级</div>
    <div class="end_tip"><b style="cursor: pointer" (click)="getEndClassList()">{{rollIndex.showEndRoll?'“折叠”':'“展开”'}}</b>所有过期班级</div>
  <div class="end_roll" *ngIf="rollIndex.showEndRoll">
    <ul class="clearfix">
      <li class="f_l customer-item-content" *ngFor="let endRoll of rollIndex.endRollArr" >
        <div class="cover gray" [style.background-image]="'url('+utilServe.readImgUrl+endRoll.CoverUrl+')'"></div>
        <div class="roll_info">
          <div class="roll_title">{{endRoll.ClassName}}</div>
          <div class="roll_num">班级号:  <span>{{endRoll.IDCode}}</span></div>
          <div class="roll_code">邀请码:  <span style="color: #8F8382">{{endRoll.InvitationCode}}</span></div>
          <div class="create_time">创建：{{endRoll.CreateTime.slice(0,10)}}</div>
          <div class="end_time">过期：{{endRoll.EndTime}}</div>
          <div class="roll_peoples">
            <div class="peoples_logo"></div>
            <div class="peoples">{{endRoll.Number}}人</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
  <div class="null" *ngIf="rollIndex.endRollArr.length == 0 && rollIndex.showEndRoll">
    <div class="null_cover"><img src="/assets/img/rollIndex/book.png" alt="" width="102" height="126"></div>
    <div class="null_tip">
      <p>还没有任何过期的班级</p>
    </div>
  </div>

</div>
<div class="delete_container" >
    <div class="buy-title">回收站</div>
    <div class="end_tip"><b style="cursor: pointer" (click)="getDeleteClassList()">{{rollIndex.showDeleteRoll?'“隐藏”':'“显示”'}}</b>所有删除的班级</div>
    <div class="delete_roll" *ngIf="rollIndex.showDeleteRoll">
      <div (click)="rollIndex.isDeleteEditor=!rollIndex.isDeleteEditor" class="setting" [ngClass]="{'setting1':rollIndex.isDeleteEditor}" nzTitle="设置" nzPlacement="topCenter" nz-tooltip></div>
      <ul class="clearfix">
        <li class="f_l" *ngFor="let deleteRoll of rollIndex.deleteRollArr;let i = index" [ngClass]="{'customer-item-content':!rollIndex.isDeleteEditor}">
          <div class="cover gray" [style.background-image]="'url('+utilServe.readImgUrl+deleteRoll.CoverUrl+')'"></div>
          <div class="roll_info">
            <div class="roll_title">{{deleteRoll.ClassName}}</div>
            <div class="roll_num">班级号:  <span>{{deleteRoll.IDCode}}</span></div>
            <div class="roll_code">邀请码:  <span style="color: #8F8382">{{deleteRoll.InvitationCode}}</span></div>
            <div class="create_time">创建：{{deleteRoll.CreateTime.slice(0,10)}}</div>
            <div class="end_time">过期：{{deleteRoll.EndTime}}</div>
            <div class="roll_peoples">
              <div class="peoples_logo"></div>
              <div class="peoples">{{deleteRoll.Number}}人</div>
            </div>
            <img src="/assets/img/rollIndex/huifu.png" alt="" class="recover" height="20" width="20" *ngIf="rollIndex.isDeleteEditor" (click)="changClassStatus(deleteRoll.PK_ClassGuid,0,i)">
          </div>
        </li>
      </ul>
    </div>
  <div class="null" *ngIf="rollIndex.deleteRollArrs.length == 0&&rollIndex.showDeleteRoll">
    <div class="null_cover"><img src="/assets/img/rollIndex/book.png" alt="" width="102" height="126"></div>
    <div class="null_tip">
      <p>还没有删除的班级</p>
    </div>
  </div>
</div>
  <div class="page" *ngIf="rollIndex.isShowPage">
    <nz-pagination [(nzPageIndex)]="rollIndex.pageIndex" [nzTotal]="rollIndex.pageTatol*this.rollIndex.showDefaultDelete" [nzPageSize]="rollIndex.showDefaultDelete"  (nzPageIndexChange)="rollIndex.pagination()"></nz-pagination>
  </div>
  <app-add-roll
    *ngIf="rollIndex.addRoll"
    (onCloseAdd)="rollIndex.onCloseAdd($event)"
    [updateRoll]="rollIndex.updateRoll"
    [userGuid]="rollIndex.userGuid"
  >
  </app-add-roll>
</div>
